import React, { useState }  from 'react';
import { configureStore } from '@reduxjs/toolkit'
import { Provider } from 'react-redux'
import { createSlice } from '@reduxjs/toolkit'
import { useSelector, useDispatch } from 'react-redux'

const counterSlice = createSlice({
  name: 'counter',
  initialState: {
    value: 0
  },
  reducers: {
    increment: state => {
      state.value += 1
    },
    decrement: state => {
      state.value -= 1
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload
    }
  }
})

const { increment, decrement, incrementByAmount } = counterSlice.actions

const store = configureStore({
  reducer: {
    counter: counterSlice.reducer
  }
})

const MyCounter = (props) => {
  const [name, setName] = useState();
  const count = useSelector(state => state.counter.value)
  const dispatch = useDispatch()

  return (
    <div>
    <button
      aria-label="Increment value"
      onClick={() => dispatch(incrementByAmount(3))}
    >
      Increment123
    </button>
    <span>{count}</span>
    <button
      aria-label="Decrement value"
      onClick={() => dispatch(decrement())}
    >
      Decrement
    </button>
  </div>
  );
};


const ReduxDemo = (props) => {
    return (
        <Provider store={store}>
          <MyCounter/>
        </Provider>
    );
};

export default ReduxDemo;
